import React, { useEffect } from 'react'
import { BannersWrapper } from './style'
import propTypes from 'prop-types'
import Swiper from 'swiper'
import { Link } from 'react-router-dom'

export default function Banners({banners}) {
    useEffect(() => {
        new Swiper('.btn-banners', {
            loop: true,
            // effect: 'cards',
            autoplay: {
                delay: 5000,
                stopOnLastSlide: false,
                disableOnInteraction: true,
                },
            // observer:true,
            // observeParents:true,
            pagination: {
                el: '.swiper-pagination'
            }
        })
    })

    const renderBtnBannersPage1 = () => {
        let items = banners.slice(0, 10);
        console.log(items)
        return items.map(item => {
            return (
                <Link 
                    to="/eleme/all"
                    className="swiper-item"
                    key={item.id}
                    >
                    <div>
                        <p>
                            <img src={item.img} />
                        </p>
                        <span>
                            {item.title}
                        </span>
                    </div>
                </Link>
            )
        })
    }

    const renderBtnBannersPage2 = () => {
        let items = banners.slice(10);
        return items.map(item => {
            return (
                <Link 
                    to="/eleme/all"
                    className="swiper-item"
                    key={item.id}
                    >
                    <div>
                        <p>
                            <img src={item.img} />
                        </p>
                        <span>
                            {item.title}
                        </span>
                    </div>
                </Link>
            )
        })
    }

    return (
    <BannersWrapper>
        <div className="btn-banners swiper-container">
            <div className="swiper-wrapper">
                <div className="swiper-slide">
                    {renderBtnBannersPage1()}
                </div>
                <div className="swiper-slide">
                    {renderBtnBannersPage2()}
                </div>
            </div>
            <div className="swiper-pagination"></div>
        </div>
    </BannersWrapper>
    )
}

Banners.propTypes = {
    banners:propTypes.array.isRequired
}
